import React from 'react';
import { useParams } from 'react-router-dom';

const PositionStrategy = () => {
  const { subpage } = useParams();
  
  // 如果没有二级页面参数，使用默认值
  const currentSubpage = subpage || 'portfolio';
  
  const getPageTitle = () => {
    switch(currentSubpage) {
      case 'portfolio': return '投资组合';
      case 'risk': return '风险管理';
      case 'optimization': return '策略优化';
      case 'backtest': return '回测结果';
      default: return '持仓策略';
    }
  };
  
  const getPageContent = () => {
    switch(currentSubpage) {
      case 'portfolio':
        return (
          <div className="page-content">
            <h3>投资组合管理</h3>
            <p>当前持仓分布和资产配置情况...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>投资组合图表</p>
            </div>
          </div>
        );
      case 'risk':
        return (
          <div className="page-content">
            <h3>风险管理</h3>
            <p>风险敞口分析和风险控制策略...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>风险分析图表</p>
            </div>
          </div>
        );
      case 'optimization':
        return (
          <div className="page-content">
            <h3>策略优化</h3>
            <p>优化投资策略以提高收益和降低风险...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>策略优化图表</p>
            </div>
          </div>
        );
      case 'backtest':
        return (
          <div className="page-content">
            <h3>回测结果</h3>
            <p>历史数据回测结果和策略表现分析...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>回测结果图表</p>
            </div>
          </div>
        );
      default:
        return <p>请从左侧选择策略类型</p>;
    }
  };

  return (
    <div className="page-container">
      <h2>{getPageTitle()}</h2>
      {getPageContent()}
    </div>
  );
};

export default PositionStrategy;